<template>
  <!--功能配置-->
  <div style="width: 100%" v-show="show">
    <el-collapse v-model="activeName">
      <el-collapse-item name="1" title="功能配置" v-if="rulesList.length!==0">
        <div style="padding-left: 40px">
          <el-collapse v-model="activeName_">
            <template v-for="item in rulesList">
              <el-collapse-item :title="tempTitle[item.settingType-1]"
                                :name="item.settingType+''">
                <component :is="tempList[item.settingType-1]"
                           :allFormData="allFormData"
                           :option="option"
                           ref="rules"
                           :show="show"
                           @removeFunctionInterfaces="v=>$emit('removeFunctionInterfaces',v)"
                           :item="item">
                </component>
              </el-collapse-item>
            </template>
          </el-collapse>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2" title="API/操作列表">
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   ref="crud">
        </avue-crud>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import * as api from "@/api/common"
import VersionRules from "@/views/DMDComponent/entityTemp/functionTemp/versionRules.vue";
import CodeRules from "@/views/DMDComponent/entityTemp/functionTemp/codeRules.vue";
import StateRules from "@/views/DMDComponent/entityTemp/functionTemp/stateRules.vue";
import {getListByInterfaceIds} from "@/api/common";

export default {
  name: "Function",
  components: {StateRules, CodeRules, VersionRules},
  inject: ["temp", "allFormData"],
  props: {
    show: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  data() {
    return {
      activeName: ["1", "2"],
      activeName_: ["1", "2", "3"],

      data: [],
      loading: false,
      option: {
        height: '300px',
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        selection: false,
        labelWidth: 120,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        align: "center",
        menu: false,
        header: false,
        rowKey: "oid",
        rowParentKey: "parentId",
        column: [
          {
            label: "操作名称",
            prop: "name",
          },
          {
            label: 'API中文名称',
            prop: 'apiNameCn',
          },
          {
            label: "API英文名称",
            prop: "apiNameEn",
          },
          {
            label: "API描述",
            prop: "apiDescribe",
          }
        ],
      },

      rulesList: [],

      tempList: [VersionRules, CodeRules, StateRules],
      tempTitle: ["版本规则配置", "编码规则配置", "状态规则配置"],

      rulesRequest: [],
    }
  },
  computed: {
    showComponent() {
      return this.temp === "EM";
    }
  },
  methods: {
    getRulesList() {
      let {step1, saveFirst, functionInterfaces} = this.allFormData();
      let form = saveFirst ? step1.functionInterfaces : functionInterfaces;
      let data = this.deepCopy(form);
      let interfaceIds = data.map(item => item.oid);

      this.getApiOrOperate(interfaceIds);

      api.getRuleList({interfaceIds: interfaceIds.join(",")}).then(res => {
        this.rulesList = res.data.data;
        /*if (interfaceIds.includes("50")) {
          let d = data.filter(i => i.oid === "50")
          this.rulesList.push({...{settingType: 3}, ...d[0]})
        }*/
      })
    },
    getTabData() {
      let refs = this.$refs["rules"];
      let d = [];
      let flag_ = true;
      if (refs && refs.length > 0) {
        for (let key in refs) {
          const {data, flag} = refs[key].getData();
          if (!flag) {
            flag_ = flag;
            break;
          } else {
            d.push(...data);
          }
        }
      }
      return {form: d, flag: flag_};
    },
    getApiOrOperate(ids) {
      api.getListByInterfaceIds({interfaceIds: ids.join(",")}).then(res => {
        this.data = res.data.data;
      })
    },
    setTabData() {
      console.log("function")
    },
  },
  watch: {
    show: {
      handler(v) {
        if (v) {
          this.getRulesList();
        }
      }
    }
  }
}
</script>
